<!-- eslint-disable vue/multi-word-component-names -->
<template>
  
  <nav class="navbar navbar-expand-lg bg-body-tertiary" >
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img class="header-logo" src="@/assets/img/log.png" alt=""></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#"><router-link to="/home" class="links" >Home</router-link></a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link" href="#">Blockchain</a>
          </li> -->

          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#"><router-link class="links" to="/transaction" >Transactions</router-link></a>
          </li>

          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="#"><router-link class="links" to="/block">View Blocks</router-link></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</template>

<script>
export default {
  name: 'Header'
}
</script>

<style>


.container-fluid {
  width: 75%;
}

body .navbar-collapse{
  flex-grow: 0;
}

.header-logo{
  vertical-align: middle;
  border-style: none;
  box-sizing: border-box;
  width: 140px;
    overflow: clip;
}

.navbar-brand img{
  height: 40px;
  width: 90px;
}


body .bg-body-tertiary{
  background-color: rgb(253, 241, 6)!important;
}


body .router-link-active {
 text-decoration: none !important;
 color: black !important;
}


.nav-link a{
    text-decoration: none;
    color:#b9b8b8;
    font-size: 20px;
  }


</style>